<!-- 工序扫码页面 -->
<template>
	<view>
		<div>
			<navitop>
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @tap="outlot"></i>
				<span slot="center-slot">
					<h4>{{titles}}</h4>
				</span>
				<i slot="right-slot" class="iconfont icon-youcecaidan" ></i>
			</navitop>
		</div>
		<!-- 顶部导航 -->
	<!-- 	<view class="hederDiv" :style="'margin-top:' + nv_height">
			<view class="Item" v-for="(iten,index) in tiList" :key="index" @tap="showModel(index,iten)">
				<text :class="['name',titleIndex==index?'showname':'']">{{iten.name}}</text>
				<view :class="['showbtn',titleIndex==index?'showBtnColor':'']"></view>
			</view>
		</view> -->

		<view :style="'margin-top:' + nv_height">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<!-- 二级工序导航 -->
				<view class="listItem">
					<view :class="['listitem_toton', namelist == index ? 'listitem_name' : '']"
						@tap="showAddModal(index,item)" v-for="(item,index) in titleList">{{item.workName}}</view>
				</view>
				<!-- 选择操作 -->
				<view class="listItem_up_list">
					<view class="listItem_up_to" @tap="scon_code(1)">扫码</view>
					<view class="listItem_up_to listItem_up_to_style" @tap="scon_code(2)">手动</view>
					<view class="listItem_up_to listItem_up_to_style" @tap="scon_code(3)">连续扫码</view>
				</view>
				<br>
				<view>{{Scan_code}}</view>
			</mescroll-body>
		</view>


		<!--工序编辑弹窗-->
		<addModel v-show="cancelShow" :gxDetails="gxDetails" :cancelShow="cancelShow" @confirm="confirm"
			@cancel="cancelShow=false"></addModel>
		
		<!-- 扫码 -->
		<tocdoe :Scan_code="tsl_code"></tocdoe>
	</view>
</template>

<script>
	import addModel from '@/components/h-form-alert/h-form-alert.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import navitop from '@/components/common/navi-top'
	import tocdoe from '@/components/dumenghanfeng-monitorScanCode/monitorScanCode.vue'
	import {pageList,tBarcode} from '@/common/api/job/sale.js'
	import {
		jurisdiction
	} from '@/common/api/common/public_api.js'
	import {
		pageVProcedureDetailSimpleVo
	} from '@/common/api/table.js';
	import {getDetailList} from '@/common/api/job/machining.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			addModel,
			navitop,
			tocdoe
		},
		data() {
			return {
				gxDetails: null, //某个工序
				nv_height: '', // 顶部距离
				cancelShow: false,
				titleIndex: 0,
				namelist: 999, // 工序选中
				namelist_tyle: false, //  工序是否选择
				titles: '工序汇报',
				tsl_code: 'continuity',// 扫码事件设置
				Scan_code: '',
				titleList: [],
				gx_id: '',
				uid: '',	// 用户工序汇报id
				set_id: '',	// 返回上一页id
				tiList: [{
					name: '工序汇报',
					code: 'hb'
				}, {
					name: "工序汇报列表",
					code: 'gx'
				}],
				lists: [{
					dispatchDate: 12
				}, {
					dispatchDate: 12
				}],
				// 下拉刷新的配置
				downOption: {
					auto: false,
					beforeEndDelay: 300
				},
				// 上拉加载的配置
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
						// icon: this.$staticUrl + '/xcxImgs/wushuju.png'
					},
					textNoMore: '没有更多数据了...',
					toTop: {
						// src: this.$baseUrl + '/images/WechatIMG748.png', //回到顶部的logo
						offset: 1000 // 滚动多少才显示to-top 
					}
				}
			}
		},
		onLoad(option) {
			this.uid = option.id;
			this.set_id = option.setid;
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: 'NewTasks'
			})
		},

		// onShow() {
		// 	//方法主动触发下拉刷新动画且请求第一页数据
		// 	setTimeout(() => {
		// 		this.mescroll.triggerDownScroll();
		// 	}, 500)
		// },


		filters: {
			//状态(0:进行中 1:中止 10：完工)
			statusFun(val) {
				if (val == 0) {
					return `进行中`
				} else if (val == 1) {
					return `中止`
				} else if (val == 10) {
					return `完工`
				}
			}
		},
		mounted() {
			this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
			
			this.font_list();
		},

		methods: {

			// 返回
			outlot() {
				uni.navigateTo({
					url: "/components/index-modules/Manufacturing/detailed?id=" + this.set_id
				})
			},
			
			 font_list(){
				 uni.showLoading({
				 	title: '加载中...'
				 })
				 getDetailList({id:this.uid}).then((rows)=> {
					 if(rows.code == 200){
						 this.titleList = rows.data;
						 uni.hideLoading();
					 }
				 })
			 },

			confirm(e) {
				this.cancelShow = false;
				//刷新
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				});
				setTimeout(() => {
					this.mescroll.triggerDownScroll();
				}, 500)
			},
			

			//  工序选中
			showAddModal(item,val) {
				this.namelist_tyle = true;
				this.namelist = item;
				this.gx_id = val.id;
				//打开的同时，启用蒙层，解决蒙层下滚动问题
				// this.cancelShow = true;
				// this.gxDetails = item;
			},
			// 头部跳转
			showModel(index, item) {
				console.log('获取工序', index, item);
				if (item.code == 'gx') {
					uni.navigateTo({
						url: '/components/index-modules/Manufacturing/report-list'
					})
				} else {
					this.titleIndex = index;
				}

				// this.mescroll.triggerDownScroll();
			},
			// 扫码
			scon_code(val) {
				let _this = this;
				if (this.namelist_tyle) {
					if (val == 1) { // 扫码 摄像头

						uni.scanCode({
							onlyFromCamera: true,
							success: function(res) {
								_this.Scan_code = '条码类型：' + res.scanType + '条码内容：' + res.result;
								console.log('条码类型：' + res.scanType);
								console.log('条码内容：' + res.result);
								uni.navigateTo({
									url: '/components/index-modules/Manufacturing/CodeTasks?code=' + res.result
								})
							}
						});
					} else if (val == 2) { //手动
					
						console.log('手动')
						
					} else if (val == 3) { //连续扫码 激光扫码
						uni.navigateTo({
							url: "/components/index-modules/Manufacturing/continuityCode?id=" + this.gx_id
						})
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: "请选工序"
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.listItem {
		background-color: #fff;
		width: 95%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.listItem_up {
		background-color: #fff;
		width: 95%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.listItem_up_list {
		background-color: #fff;
		width: 95%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		top: 10px;
		height: 300px;

	}

	.listItem_up_to {
		border: 1px solid #cacaca;
		height: 90px;
		width: 90px;
		border-radius: 85px;
		text-align: center;
		line-height: 90px;
		margin-top: 28%;
		background-color: #ECEFF8;
		color: #93A7B2;
	}

	.listItem_up_to_style {
		background-color: #E4F6FD !important;
		color: #45A39D;
	}

	.listitem_toton {
		margin: auto;
		padding: 0 20px 0 20px;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
	}

	.listitem_name {
		color: #fff !important;
		background-color: #007AFF;
		
	}

	.hederDiv {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: white;
		// position: fixed;
		// top: 0;
		// z-index: 10;
	}

	.Item {
		width: 350rpx;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.name {
		color: #999999;
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}

	.showname {
		color: #007AFF !important;
	}

	.showbtn {
		width: 150rpx;
		height: 8rpx;
		border-radius: 25rpx;
		background-color: white;
		margin-bottom: 10rpx;
	}

	.showBtnColor {
		background-color: #007AFF !important;
	}

	.hbBtn {
		width: 120rpx;
		height: 65rpx;
		font-size: 30rpx;
		color: white;
		border-radius: 15rpx;
		background-color: #007AFF;
		text-align: center;
		line-height: 65rpx;
	}

	.showBtn {
		background-color: #3168FF;
	}

	.tl-show {
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 11;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
</style>
